<template>
  <s-layout title="学员管理" navbar="inner">
    <view class="header-box" :style="[
	      {
	        marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
	        paddingTop: Number(statusBarHeight + 108) + 'rpx',
	      },
	    ]">
      <!-- 推广数据总览 -->
      <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
        <view class="data-card" style="width: 100%">
          <view class="total-item" style="width: 100%">
            <view class="item-title" style="text-align: center">学员总数</view>
            <view class="total-num" style="text-align: center">
              {{state.pagination.total}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="promoter-list ss-p-x-20 ss-p-t-20">
      <view class="search acea-row row-between-wrapper ss-flex">
        <view class="input">
          <input placeholder="点击搜索学员名称" v-model="state.pagination.name" confirm-type="search" name="search"
            @confirm="submitForm" />
        </view>
        <uni-icons type="search" class="ss-m-l-20" size="28" @click="submitForm"></uni-icons>
      </view>
      <view class="list">
        <template v-if="state.pagination?.list.length">
          <block v-for="item in state.pagination.list" :key="item.id">
            <view class="item acea-row row-between-wrapper" style="display: flex"
              @click="sheep.$router.go(`/pages/student/add?id=${item.id}&isEdit=0`)">
              <view class="picTxt acea-row row-between-wrapper" style="display: flex; align-items: center">
                <view class="pictrue" style="flex-shrink: 0;">
                  <image
                    :src="item.avatar ? sheep.$url.cdn(item.avatar) : 'https://txz-1332973494.cos.ap-guangzhou.myqcloud.com/static/img/shop/txz.jpg'"
                    mode="aspectFill" />
                </view>
                <view class="text">
                  <view class="name ss-flex">
                    <text class="ss-m-r-10">{{item.name}}</text>
                    <x-icon v-if="item.sex==1" type="nan" color="#114adb" size="32"></x-icon>
                    <x-icon v-else type="nv" color="#f63b77" size="32"></x-icon>
                  </view>
                  <view>家长：{{item.userName}}</view>
                  <view style="color: #999" @click.stop="call(item.mobile)">联系电话：<text
                      style="color: #114adb">{{item.mobile}}</text></view>
                </view>
              </view>
              <view class="right" style="
                    justify-content: center;
                    flex-direction: column;
                    display: flex;
                    margin-left: auto;
                  ">
                <view class="his-btn" @click="sheep.$router.go(`/pages/index/accompany?id=${item.id}`)">陪伴记录</view>
                <view class="his-btn" @click="sheep.$router.go(`/pages/index/growup?id=${item.id}`)">成长记录</view>
                <!-- sheep.$router.go(`/pages/zlr/detail?id=${item.id}`) -->
                <!-- //成长陪伴记录 type 1 陪伴 2 成长
                const toHis = (id, type) => {
                  let url = type == 1 ? `/pages/index/accompany` : `/pages/index/growup` -->
              </view>
            </view>
          </block>
          <uni-load-more :status="state.loadStatus" />
        </template>
        <s-empty v-else-if="state.pagination?.list.length === 0 && noData" text="暂无学员" />
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import {
    onLoad,
    onReachBottom
  } from '@dcloudio/uni-app';
  import {
    computed,
    reactive,
    ref
  } from 'vue';
  import _ from 'lodash-es';

  import StudentApi from '@/sheep/api/member/student';

  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  // const agentInfo = computed(() => sheep.$store('user').agentInfo);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');

  let noData = ref(false)

  const state = reactive({
    pagination: {
      pageNo: 1,
      pageSize: 12,
      name: '',
      list: [],
      total: 0,
    },
    loadStatus: '',
  });


  const call = (phoneNumber) => {
    uni.makePhoneCall({
      phoneNumber
    });
  }
  // 搜索
  const submitForm = () => {
    state.pagination.list = [];
    getList();
  }
  //成长陪伴记录 type 1 陪伴 2 成长
  const toHis = (id, type) => {
    let url = type == 1 ? `/pages/index/accompany` : `/pages/index/growup`
    uni.setStorageSync('stuId', id);
    sheep.$router.go(url)
  }

  const getList = async () => {
    state.loadStatus = 'loading';
    let {
      code,
      data
    } = await StudentApi.getStudentPage({
      pageNo: state.pagination.pageNo,
      pageSize: state.pagination.pageSize,
      name: state.pagination.name
    });
    noData.value = true
    if (code !== 0) {
      return;
    }
    state.pagination.list = _.concat(state.pagination.list, data.list);
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
  }


  onLoad(() => {
    getList()
  });

  // 加载更多
  const loadMore = () => {
    if (state.loadStatus === 'noMore') {
      return;
    }
    state.pagination.pageNo++;
    getList();
  }

  // 上拉加载更多
  onReachBottom(() => {
    loadMore();
  });
</script>

<style lang="scss" scoped>
  .l1 {
    background-color: #fff;
    height: 86rpx;
    line-height: 86rpx;
    font-size: 28rpx;
    color: #282828;
    border-bottom: 1rpx solid #eee;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
    display: flex;
    justify-content: space-around;
  }

  .header-box {
    box-sizing: border-box;
    padding: 0 20rpx 20rpx 20rpx;
    width: 750rpx;
    z-index: 3;
    position: relative;
    // background: v-bind(headerBg) no-repeat,
    //   linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
    // background-size: 750rpx 100%;
    background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));

    // 团队信息总览
    .team-data-box {
      .data-card {
        width: 305rpx;
        background: #ffffff;
        border-radius: 20rpx;
        padding: 20rpx;

        .item-title {
          font-size: 22rpx;
          font-weight: 500;
          color: #999999;
          line-height: 30rpx;
          margin-bottom: 10rpx;
        }

        .total-item {
          margin-bottom: 30rpx;
        }

        .total-num {
          font-size: 38rpx;
          font-weight: 500;
          color: #333333;
          font-family: OPPOSANS;
        }

        .category-num {
          font-size: 26rpx;
          font-weight: 500;
          color: #333333;
          font-family: OPPOSANS;
        }
      }
    }
  }

  .list-box {
    z-index: 3;
    position: relative;
  }

  .his-btn {
    border: 1px solid #666;
    line-height: 1;
    padding: 8rpx 12rpx;
    border-radius: 28rpx;
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }

  .chat-custom-right {
    .time-text {
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
    }

    .tag-box {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 21rpx;
      line-height: 30rpx;
      padding: 5rpx 10rpx;
      width: 140rpx;

      .tag-img {
        width: 34rpx;
        height: 34rpx;
        margin-right: 6rpx;
        border-radius: 50%;
      }

      .tag-title {
        font-size: 18rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 20rpx;
      }
    }
  }

  // 推荐人
  .referrer-box {
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    padding: 20rpx;

    .referrer-avatar {
      width: 34rpx;
      height: 34rpx;
      border-radius: 50%;
    }
  }

  .promoter-list .nav {
    background-color: #fff;
    height: 86rpx;
    line-height: 86rpx;
    font-size: 28rpx;
    color: #282828;
    border-bottom: 1rpx solid #eee;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
    margin-top: -30rpx;
  }

  .promoter-list .nav .item.on {
    border-bottom: 5rpx solid;
    // $theme-color
    color: var(--ui-BG-Main);
    // $theme-color
  }

  .promoter-list .search {
    width: 100%;
    background-color: #fff;
    height: 100rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    border-radius: 14rpx;
  }

  .promoter-list .search .input {
    width: 592rpx;
    height: 60rpx;
    border-radius: 50rpx;
    background-color: #f5f5f5;
    text-align: center;
    position: relative;
  }

  .promoter-list .search .input input {
    height: 100%;
    font-size: 26rpx;
    width: 610rpx;
    text-align: center;
  }

  .promoter-list .search .input .placeholder {
    color: #bbb;
  }

  .promoter-list .search .input .iconfont {
    position: absolute;
    right: 28rpx;
    color: #999;
    font-size: 28rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  .promoter-list .search .iconfont {
    font-size: 32rpx;
    color: #515151;
    height: 60rpx;
    line-height: 60rpx;
  }

  .promoter-list .list {
    margin-top: 20rpx;
    border-radius: 14rpx;
  }

  .promoter-list .list .sortNav {
    background-color: #fff;
    height: 76rpx;
    border-bottom: 1rpx solid #eee;
    color: #333;
    font-size: 28rpx;
    border-top-left-radius: 14rpx;
    border-top-right-radius: 14rpx;
  }

  .promoter-list .list .sortNav .sortItem {
    text-align: center;
    flex: 1;
  }

  .promoter-list .list .sortNav .sortItem image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 6rpx;
    vertical-align: -3rpx;
  }

  .promoter-list .list .item {
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    // height: 152rpx;
    padding: 20rpx 24rpx;
    font-size: 24rpx;
    color: #666;
  }

  .promoter-list .list .item .picTxt .pictrue {
    width: 106rpx;
    height: 106rpx;
    border-radius: 50%;
    font-size: 0;
  }

  .promoter-list .list .item .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3rpx solid #fff;
    box-shadow: 0 0 10rpx #aaa;
    box-sizing: border-box;
  }

  .promoter-list .list .item .picTxt .text {
    // width: 304rpx;
    font-size: 24rpx;
    color: #666;
    margin-left: 14rpx;
  }

  .promoter-list .list .item .picTxt .text .name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 12rpx;
    font-weight: bold;
  }

  .promoter-list .list .item .right {
    text-align: right;
    font-size: 22rpx;
    color: #333;
  }

  .promoter-list .list .item .right .num {
    margin-right: 7rpx;
  }
</style>